<template>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			
			<!-- <view class="section">
				<view class="section__title">原始体重(kg):</view>
				<input v-model="form.originW" name="input" type="number" placeholder="请输入原始体重" />
			</view>
			<view class="section">
				<view class="section__title">目标体重(kg):</view>
				<input v-model="form.targetW" name="input" type="number" placeholder="请输入原目标体重" />
			</view>
			<view class="section">
				<view class="section__title">昨日饮食(kg):</view>
				<input v-model="form.yesterdayFood" name="input" type="number" placeholder="请输入原昨日饮食" />
			</view>
			
			<view class="section">
				<view class="section__title">➊早餐:</view>
				<input v-model="form.breakfisrt" name="input" placeholder="请输入早餐" />
			</view>
		
			<view class="section">
				<view class="section__title">➋午餐: </view>
				<input name="input" placeholder="请输入午餐" />
			</view>
			<view class="section">
				<view class="section__title">➌晚餐: </view>
				<input name="input" placeholder="请输入晚餐" />
			</view>
			<view class="section">
				<view class="section__title">饮水量共(ML):</view>
				<input name="input" placeholder="请输入饮水量" />
			</view>
			<view class="section">
				<view class="section__title">排便情况：</view>
				<input name="input" placeholder="请输入排便情况" />
			</view>
			<view class="section section_gap">
				<view class="section__title">昨日体重(kg):</view>
					<input name="input" type="number" placeholder="请输入昨日体重" />
			</view>
			<view class="section section_gap">
				<view class="section__title">今日体重(kg):</view>
				<input name="input" type="number" placeholder="请输入今日体重" />
			</view>
			<view class="section section_gap">
				<view class="section__title">对比昨日(kg):</view>
					<input name="input" type="number" placeholder="请输入对比昨日" />
			</view>
			<view class="section section_gap">
				<view class="section__title">累计天数:</view>
				<input name="input" type="number" placeholder="请输入累计天数" />
			</view>
			<view class="section section_gap">
				<view class="section__title">累计降重(kg):</view>
				<input name="input" type="number" placeholder="请输入累计降重" />
			</view>
			<view class="btn-area funcBtn">
				<button type="primary" @click="addRec">提交</button>
				<button type="warn" @click="clearRec">重置</button>
			</view> -->
			
		</form>
		<view class="test">
			<!-- <u-link>klsskdfjkljl</u-link>
			 -->
				 
				 
			 <unit-list>
				  <unit-list-item v-bind:title="item.title" v-bind:note="item.note"></unit-list-item>
				   <unit-list-item v-bind:title="item.title" v-bind:note="item.note"></unit-list-item>
				    <unit-list-item v-bind:title="item.title" v-bind:note="item.note"></unit-list-item>
					 <unit-list-item v-bind:title="item.title" v-bind:note="item.note"></unit-list-item>
			 </unit-list>
			 <input class="address" placeholder="三级联动地址" v-model="city" @click="showMulLinkageThreePicker" />
			<citypicker ref="mpvueCityPicker" @onCancel="onCancel" @onConfirm="onConfirm"></citypicker>
			<splitLine></splitLine>
	
			<mpvuepicker></mpvuepicker>
			
		</view>
	</view>
</template>

<script>
	
	// mpvue component
	import citypicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import uLink from '@/components/uLink.vue'
	import unitList from '@/components/uni-list/uni-list.vue'
	import unitListItem from '@/components/uni-list-item/uni-list-item.vue'
	
	// custom component
	// import splitLine from '@/components/custom-hr/hr.vue'
	import mpvuepicker from '@/components/mpvue-picker/mpvuePicker.vue'
	console.log(citypicker)
	export default {
		components:{
			unitList,
			unitListItem,
			citypicker,
			// plitLine,
			mpvuepicker
			
		},
		data() {
			return { 
				item:{
					title: '哈哈哈',
					note: '晚上聚餐'
				},
				city: '',
				form: {
					originW: 22,
					targetW: 22,
					yesterdayFood: 22,
					breakfisrt: 22,
					lunch: '大碴粥 红烧肉',
					dinner: '红烧配股、地瓜粥',
					drink: 6,
					defecation: '4次厕所',
					yesterdayW: 78,
					todayW: 78,
					constrat4yesterday: 2,
					totalDay: 29,
					totalKillFat: 28
				}
			};
		},
		methods:{
			addRec(){
				uni.showModal({
					title: '今天的健身饮食记录',
					content: JSON.stringify(this.form)
				})
			},
			clearRec(){
				this.form = {};
				uni.showModal({
					title: '信息提示',
					content: '表单清理成功'
				})
			},// 三级联动选择
			showMulLinkageThreePicker() {
				// console.log(this.$refs)
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e){
				console.log(e)
				this.city = e.label
			}
			
		}
	}
</script>

<style lang="scss">
	.container{
		margin-left: 10upx;
		margin-right: 10upx;
		.section{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 30upx;
			margin-top: 8upx;
			color: #808080;
			.section__title{
				width: 200upx;
				text-align: right;
			}
			
		}
		.funcBtn{
			display: flex;
			flex-direction: column;
			justify-content: center;
			button{
				width: 100%;
				margin-top: 5upx;
			}
				
		}
		.test{
			.address{
				font-size: 28upx;
			}
		}
	}
	
</style>
